<template>
    <div class="componentSearchContainer">
        <span class="inputLabel">组件名称-英文</span>
        <el-input v-model="componentSearchData.componentName" placeholder="组件名称-英文" class="searchInfoInput"></el-input>

        <span class="inputLabel">组件名称-中文</span>
        <el-input v-model="componentSearchData.componentCnName" placeholder="组件名称-中文" class="searchInfoInput"></el-input>

        <span class="inputLabel">组件类型</span>
        <el-select v-model="componentSearchData.componentType" placeholder="组件类型" class="searchInfoInput" clearable>
            <el-option label="图标组件" value="ICON"/>
            <el-option label="通用组件" value="COMMON"/>
            <el-option label="自定义组件" value="CUSTOM"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryComponentInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script>
import {componentInfoQueryNoContent} from "@/request/components";

export default {
    name: "ComponentSearch",
    data() {
        return {
            searchLoading: false
        }
    },
    methods: {
        queryComponentInfo() {
            this.searchLoading = true
            componentInfoQueryNoContent(this.componentSearchData).then(res => {
                this.$store.state.componentDataList = res.data;
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            this.$store.state.componentSearchData = {
                componentName: "",
                componentCnName: "",
                componentType: "",
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 10
                }
            };
        }
    },
    computed: {
        componentSearchData() {
            return this.$store.state.componentSearchData;
        }
    },
}
</script>

<style scoped lang="less">
.componentSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>